<template>
<div>
    
<div class="col-md-3">    
<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">功能模块</h3>
	</div>
	<div class="panel-body">
		<ul id="treeDemomkgl" class="ztree"></ul>
	</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">功能操作</h3>
	</div>
	<div class="panel-body">
        <form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">名称</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname" 
				   placeholder="请输入名称">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">上级名称</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入上级名称" readonly="readonly">
		</div>
	</div>
   
   <div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">url</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入地址" >
		</div>
	</div>

 <!-- <div class="form-group" >
		<label for="lastname" class="col-sm-2 control-label">图标</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入图标" >
		</div>
	</div>!-->
    
  <div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">状态</label>
		<div class="col-sm-10">
			<select class="form-control" title="">
        <option>开启</option>
<option>关闭</option>
            </select>
		</div>
	</div>

  <div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">说明</label>
		<div class="col-sm-10">
		 <textarea class="form-control" rows="3"></textarea>
		</div>
	</div>

	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">保存</button>
		</div>
	</div>
</form>
	</div>
</div>
</div>
</div>
</template>
<style>
@import '../../../../static/css/ztree/metroStyle.css';
</style>
<script>
 
import '../../../../static/js/ztree/jquery.ztree.exedit.js';

export default {
    data(){
        return{
        }
    },
     mounted(){
        domain.staticzt=false;
     }
};
     var setting = {
     
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
               selectedMulti: false


            },
          callback:{
        beforeDrag:function(){return false;},
         onRename: onRename //修改事件
             	},
            check: {
                enable: true,
             
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: false
            },
                check: {
　　　　enable: false,

},
            
        };

     	var zNodes =[
			{ name:"父节点1 - 展开", open:true,
				children: [
					
							{ name:"叶子节点111"},
							{ name:"叶子节点112"},
							{ name:"叶子节点113"},
							{ name:"叶子节点114"}
                        ],
            }
					

		];



        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemomkgl"), setting, zNodes);

          
        });
function onRename(e, treeId, treeNode, isCancel) {

alert(treeNode.name);
}
        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
              
                var zTree = $.fn.zTree.getZTreeObj("treeDemomkgl");

 $(".form-group").eq(1).show();
        try{
           var pNode = treeNode.getParentNode();
           $("input").eq(1).val(pNode.name);
            $("input").eq(0).val(treeNode.name);
        }catch(ex){

         $(".form-group").eq(1).hide();
        
        }
            if(typeof(pNode.name)!="undefined")
               
            //  zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });
        };
        
        function removeHoverDom(treeId, treeNode) {
          $("#addBtn_"+treeNode.tId).unbind().remove();
       };
        //-->

</script>
